<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="java.util.List" %>
<%@ page import="main.www.wonderfuldata.bean.Temp" %>
<%@ page import="main.www.wonderfuldata.bean.User2" %>
<%@ page import="main.www.wonderfuldata.com.StatementTest" %><%--
  Created by IntelliJ IDEA.
  User: root
  Date: 2022-05-11
  Time: 7:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <meta charset="utf-8"><link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico">

    <script src="https://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
    <script src="https://cdn.highcharts.com.cn/highcharts/modules/exporting.js"></script>
    <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>

</head>
<body>

<table align="center">
    <tr>
        <td>ID</td>
        <td>ID</td>
        <td>ID</td>
        <td>ID</td>


    </tr>
    <tr>
        <c:forEach items="${requestScope.listTemp}" var="keyword" varStatus="id">
            <td id=${id.index}>${id.index}</td>
            <td name="didian">${keyword.didian}</td>
            <td name="rainfall">${keyword.rainfall}</td>
            <td name="temperature">${keyword.temperature}</td>
        </c:forEach>
    </tr>
</table>
<div id="container" style="min-width:400px;height:400px"></div>
<script>



    var didian =  ['地点3'];
    var rainfall = [1];
    var temperature = [1];
    var i = 0;
    for(;i<document.getElementsByName("didian").length;i++){
        didian.push( document.getElementsByName("didian")[i].innerHTML);
        rainfall.push(Number(document.getElementsByName("rainfall")[i].innerHTML));

        temperature.push(Number(document.getElementsByName("temperature")[i].innerHTML));
    }
    // rainfall.map(Number);
    // temperature.map(Number);




    var chart = Highcharts.chart('container', {
        chart: {
            zoomType: 'xy'
        },
        title: {
            text: '东京月平均温度和降雨量'
        },
        subtitle: {
            text: '数据来源: WorldClimate.com'
        },
        xAxis: [{
            categories: didian,
            crosshair: true
        }],
        yAxis: [{ // Primary yAxis
            labels: {
                format: '{value}°C',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            },
            title: {
                text: '温度',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            }
        }, { // Secondary yAxis
            title: {
                text: '降雨量',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            labels: {
                format: '{value} mm',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            opposite: true
        }],
        tooltip: {
            shared: true
        },
        legend: {
            layout: 'vertical',
            align: 'left',
            x: 120,
            verticalAlign: 'top',
            y: 100,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
        },
        series: [{
            name: '降雨量',
            type: 'column',
            yAxis: 1,
            data: rainfall,
            tooltip: {
                valueSuffix: ' mm'
            }
        }, {
            name: '温度',
            type: 'spline',
            data: temperature,
            tooltip: {
                valueSuffix: '°C'
            }
        }]
    });

</script>





<%--<table>--%>
<%--    <tr>--%>
<%--        <td>ID</td>--%>

<%--    </tr>--%>
<%--    <c:forEach items="${list}" var="student">// items为list的一个迭代器，list为Action中传递过来的list，student为Student类对象--%>
<%--        <tr>--%>
<%--            <td>${list}</td>//输出student的id属性--%>

<%--        </tr>--%>
<%--    </c:forEach>--%>
<%--</table>--%>


<%--<table>--%>
<%--    <tr>--%>
<%--        <td>ID</td>--%>

<%--    </tr>--%>
<%--    <c:forEach items="${listTemp}" var="student">// items为list的一个迭代器，list为Action中传递过来的list，student为Student类对象--%>
<%--    <tr>--%>
<%--        <td>${listTemp.Rainfall}</td>//输出student的id属性--%>

<%--    </tr>--%>
<%--    </c:forEach>--%>
<%--</table>--%>


</body>
</html>
